import {type FC, useEffect, useState} from'react';
import {Pagination} from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';


type propsType = {
  total:number
}

const ListPagination:FC<propsType> = (props:propsType)=>{
  const navigate = useNavigate()
  const {pathname} = useLocation()
  const [searchParams] = useSearchParams()
  const [pageParams,setPageParams ] = useState({
    page:1,
    pageSize:4,
  })

  useEffect(()=>{
    const page = parseInt(searchParams.get('page') || '1')
    const pageSize = parseInt(searchParams.get('pageSize') || '4')
    setPageParams({
      page,
      pageSize,
    })
  },[searchParams])

  // 分页
  const handlePageChange =(page:number,pageSize:number)=>{
    searchParams.set('page',String(page))
    searchParams.set('pageSize',String(pageSize))
    navigate({
      pathname,
      search: searchParams.toString()
    })

  }
  return(
    <div> 
      <Pagination
        pageSizeOptions={[4,8,12]}  pageSize={pageParams.pageSize} 
        current={pageParams.page}  onChange={handlePageChange} 
        align="center"  total={props.total} />
    </div> 
  )
}


export default ListPagination;